<template>
  <div>
    <el-row class="create-body">
      <el-form ref="form" :model="form" :inline="true" label-width="90px">
        <el-form-item label="封面" prop="file_path" :rules="filter_rules({type: 'upload'})">
          <!-- <el-upload
            action="/api/backstage/fileUpload"
            class="avatar-uploader"
            name="file_path"
            :before-upload="beforeAvatarUpload"
            :on-success="handleSuccess"
            :show-file-list="false"
          >
            <img v-if="form.file_path" :src="form.file_path" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>-->
          <div class="img-box" v-if="form.file_path">
            <img :src="form.file_path" width="100%" class="avatar" @click="sizeSet">
          </div>
          <i v-else class="el-icon-plus avatar-uploader-icon" @click="sizeSet"></i>
        </el-form-item>
        <el-form-item label="描述" prop="option_desc" :rules="filter_rules({required:true})">
          <textarea
            cols="50"
            rows="6"
            style="padding: 10px; border-radius: 5px;"
            placeholder="请输入详细描述..."
            v-model.trim="form.option_desc"
          ></textarea>
        </el-form-item>
      </el-form>
    </el-row>
    <section>
      <size-temp2 ref="size" :img.sync="form.file_path" title="选项图片设置"></size-temp2>
    </section>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import sizeTemp2 from "@/components/draggableSize/index2";

/* doc 
    类型一的选项设置 模板
*/
export default {
  name: "oneTemp",
  data() {
    return {
      form: { file_path: "" },
      ossPublicUrl: localStorage.getItem("ossPublicUrl")
    };
  },
  components: {
    sizeTemp2
  },
  computed: {
    ...mapGetters(["vtDecide"])
  },
  methods: {
    sizeSet() {
      this.$refs.size.open();
    },
    async setForm(e) {
      this.form = e;
    },
    clearForm() {
      this.form = { file_path: "" };
    },
    beforeAvatarUpload(file) {
      let name = file.name.split(".");
      if (
        name[name.length - 1] === "jpg" ||
        name[name.length - 1] === "jpeg" ||
        name[name.length - 1] === "png"
      ) {
        return file;
      } else {
        this.$message.error("图片只能是 jpeg/png 格式!");
        return false;
      }
    },
    handleSuccess(res, file, fileList) {
      if (res.status == 100) {
        this.form.file_path = this.ossPublicUrl + "/" + res.data.file_path;
      }
    },
    async validate() {
      try {
        await this.$refs["form"].validate();
      } catch (flag) {
        //falg 此处为 false全局 vtIsSub = false
        await this.$store.dispatch("SetIsSub", false);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
$border: 1px dashed #d9d9d9;
$picture-size: 120px;

.create-body {
  padding-top: 10px;
}

.avatar-uploader {
  .el-upload {
    border: $border;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &:hover {
      border-color: #409eff;
    }
  }
}

.avatar-uploader-icon {
  border: $border;
  font-size: 28px;
  color: #8c939d;
  width: $picture-size;
  height: $picture-size;
  line-height: $picture-size;
  text-align: center;
  border-radius: 5px;
}

.avatar {
  width: $picture-size;
  height: $picture-size;
  display: block;
  border-radius: 5px;
  cursor: pointer;
}
</style>
